<template>
  <div class="login">
    <back></back>
    <!-- <van-icon class="revoke" name="revoke" @click="back()" /> -->
    <van-tabs>
      <van-tab title="账号登录">
        <van-form @submit="loginByPassword">
          <van-field
            v-model="account"
            name="account"
            placeholder="请输入手机号"
            :border="true"
            :rules="[
              { required: true, message: '请输入手机号', trigger: 'onChange' },
              {
                path: /^1[345678]\d{9}$/,
                message: '手机格式错误',
                trigger: 'onChange',
              },
            ]"
          >
            <template #left-icon>
              <i class="fa fa-mobile"></i>
            </template>
          </van-field>
          <van-field
            v-model="password"
            :border="true"
            type="password"
            name="password"
            placeholder="密码"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'onChange' },
              {
                path: /^[A-Za-z0-9]+$/,
                message: '密码格式错误',
                trigger: 'onChange',
              },
            ]"
          >
            <template #left-icon>
              <i class="fa fa-lock"></i>
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <van-tab title="快速登录">
        <van-form @submit="loginBycode">
          <van-field
            v-model.number="account"
            name="account"
            placeholder="请输入手机号"
            :border="true"
            :rule="[
              { required: true, message: '请输入手机号', trigger: 'onChange' },
              {
                pattern: /^1[345678]\d{9}$/,
                message: '手机格式错误',
                trigger: 'onChange',
              },
            ]"
          >
            <template #left-icon>
              <i class="fa fa-mobile"></i>
            </template>
          </van-field>
          <van-field
            v-model="verfycode"
            type="verfycode"
            :border="true"
            name="verfycode"
            placeholder="填写验证码"
            :rules="[
              { required: true, message: '填写验证码', trigger: 'onChange' },
            ]"
          >
            <template #left-icon>
              <i class="fa fa-lock"></i>
            </template>
            <template #button>
              <van-button
                size="small"
                :disabled="isSend"
                type="primary"
                @click="sendCode"
                native-type="button"
              >
                {{ !isSend ? "发送验证码" : counter + "秒之后继续发送" }}
              </van-button>
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { mapMutations, mapActions } from "vuex";
import Back from "@/components/Back.vue";
export default {
  data() {
    return {
      account: "",
      password: "",
      veryfycode: "",
      sendkey: "",
      counter: 60,
      isSend: false,
      timmerID: null,
      verfycode: "",
    };
  },
  components:{
    Back,
  },
  created() {
    this.axios.get("/verify_code").then((r) => {
      this.sendkey = r.key;
    });
  },
  methods: {
    ...mapMutations(["SaveToken"]),
    ...mapActions(["getuserInfo"]),
    // LoginToken
    loginByPassword(event) {
      this.axios.post("/login", event).then((result) => {
        console.log(result);
        if (result.status == 400) {
          this.$dialog.alert({
            title: "登录提示",
            message: result.msg,
          });
        } else {
          this.SaveToken(result.token);
          this.$dialog
            .alert({
              title: "登录提示",
              message: "登录成功！",
            })
            .then(() => {
              this.getuserInfo();
              this.$router.back();
              // if(res.status==200){
              //   var token=res.data.token;
              //   window.localStorage.setItem("token",token);
                // this.$router.push({path:"/user"});
              // }
            });
        }
      });
    },
    // {
    //  submitForm(formName) {
    //  this.$axios
    //   .post('/api/admin/login', {
    //   userName: this.ruleForm.userName,
    //   password: this.ruleForm.password
    //   })
    //   .then(successResponse => {
    //   this.responseResult = JSON.stringify(successResponse.data)
    //   this.msg = JSON.stringify(successResponse.data.msg)
    //   if (successResponse.data.code === 200) {
    //   this.msg='';
    //   localStorage.setItem('userName',this.ruleForm.userName);
    //   //获取并存储服务器返回的AuthorizationToken信息
    //   var authorization=successResponse.headers['authorization'];
    //   localStorage.setItem('authorization',authorization);
    //   //登录成功跳转页面
    //   this.$router.push('/dashboard');

    //   }
    //   })
    //   .catch(failResponse => {})
    //  }
    //  }
    sendCode() {
      if (!this.account || this.account.length != 11) {
        this.$toast("手机号码不能为空且长度为11位");
      }
      this.axios
        .post("/register/verify", {
          code: "",
          key: this.sendkey,
          phone: this.account,
          type: "login",
        })
        .then((re) => {
          if (re.status == 200) {
            this.$toast.success(re.msg);
            this.isSend = true;
            this.timmerID = setInterval(() => {
              if (this.counter == 0) {
                this.isSend = false;
                clearInterval(this.timmerID);
                return;
              }
              this.counter--;
            }, 1000);
          } else {
            this.$toast.fail(re.msg);
          }
        });
    },
    loginBycode(event) {
      this.axios
        .post("login/mobile", {
          phone: event.account,
          captcha: event.veryfycode,
          spread: null,
        })
        .then((re) => {
          if (re.token) {
            this.SaveToken(re.token);
            this.$toast.success({
              message: "登录成功",
              onClose: () => {
                this.getuserInfo();
                this.$router.back();
              },
            });
          } else {
            this.$toast.fail(re.msg);
          }
          console.log(re);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.revoke {
  bottom: 50vh;
}
.login {
  .fa-mobile {
    font-size: 24px;
    color: #ccc;
  }
  .fa-lock {
    font-size: 18px;
    color: #ccc;
  }
  .van-field {
    &::after {
      border-bottom-color: #bcbfc4;
    }
    .van-cell__value {
      padding-left: 20px;
    }
  }
  .van-button--info {
    background: linear-gradient(90deg, #f35447 0, #ff8e3c);
    border: none;
  }
  .van-button--small {
    padding: 0px 5px;
    border-radius: 20px;
    background-color: #f35446;
    border: none;
    height: 20px;
  }
}
</style>